<template>
    <el-container>
        <el-tabs v-model="activeName" class="demo-tabs" @tab-change="change">
            <el-tab-pane label="突破20W" name="GB20UP">
                <GBStaUpRefine  :dtype="'20w'" v-if="activeName === 'GB20UP'"></GBStaUpRefine>
            </el-tab-pane>
            <el-tab-pane label="突破30W" name="GB30UP">
                <GBStaUpRefine  :dtype="'30w'" v-if="activeName === 'GB30UP'"></GBStaUpRefine>
            </el-tab-pane>
            <el-tab-pane label="突破60W" name="GB60UP">
                <GBStaUpRefine  :dtype="'60w'" v-if="activeName === 'GB60UP'"></GBStaUpRefine>
            </el-tab-pane>
            <el-tab-pane label="60WTop" name="GB60Top">
                <GB60WRefine  :dtype="'top'" v-if="activeName === 'GB60Top'"></GB60WRefine>
            </el-tab-pane>
            <el-tab-pane label="60WLow" name="GB60Low">
                <GB60WRefine  :dtype="'low'" v-if="activeName === 'GB60Low'"></GB60WRefine>
            </el-tab-pane>
            <el-tab-pane label="30WTop" name="GB30Top">
                <GB30WTop v-if="activeName === 'GB30Top'"></GB30WTop>
            </el-tab-pane>
            <el-tab-pane label="30WLow" name="GB30Low">
                <GB30WLow v-if="activeName === 'GB30Low'"></GB30WLow>
            </el-tab-pane>
            <el-tab-pane label="20WTop" name="GB20Top">
                <GB20WTop v-if="activeName === 'GB20Top'"></GB20WTop>
            </el-tab-pane>
            <el-tab-pane label="MostDe" name="MostDe">
                <WeekPctMostDe v-if="activeName === 'MostDe'"></WeekPctMostDe>
            </el-tab-pane>
            <el-tab-pane label="MeanGt" name="MeanGt">
                <WeekMeanGt v-if="activeName === 'MeanGt'"></WeekMeanGt>
            </el-tab-pane>
            <el-tab-pane label="ETF_PCT_SUM" name="ETF_PCT_SUM">
                <WeekPctMostPctSum v-if="activeName === 'ETF_PCT_SUM'"></WeekPctMostPctSum>
            </el-tab-pane>
        </el-tabs>
    </el-container>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import GB30WTop from '../components/gb/GB30WTop.vue';
import GB20WTop from '../components/gb/GB20WTop.vue';
import GB30WLow from '../components/gb/GB30WLow.vue';
import GB60WRefine from '../components/gb/GB60WRefine.vue';
import GBStaUpRefine from '../components/gb/GBStaUpRefine.vue';
import WeekPctMostDe from '../components/WeekPctMostDe.vue';
import WeekMeanGt from '../components/WeekMeanGt.vue';
import WeekPctMostPctSum from '../components/WeekPctMostPctSum.vue';

document.title = "GB统计";

const activeNameKey = "GBStaActiveName"
const activeName = ref(sessionStorage.getItem(activeNameKey) || 'GB60UP')

const change = (tabName : string) => {
    sessionStorage.setItem(activeNameKey, tabName)
}
</script>